<template>
  <div class="app-container">
    <el-form :inline="true">
      <el-form-item label="讲师">
       <!--  <el-input v-model="searchObj.name"></el-input> -->
         <el-autocomplete
          v-model="searchObj.name"
          :fetch-suggestions="querySearchAsync"
          placeholder="请输入名字"
          :trigger-on-focus="false"
          value-key="name"
        ></el-autocomplete>
      </el-form-item>
      <el-form-item label="头衔">
        <el-select v-model="searchObj.level" placeholder="请选择">
          <el-option label="高级讲师" value="1"></el-option>
          <el-option label="首席讲师" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item style="margin-left: 500px">
        <el-button type="primary" icon="el-icon-search" @click="fetchData()"
          >查询</el-button
        >
        <el-button type="info" icon="el-icon-remove" @click="resetData"
          >清空</el-button
        >
      </el-form-item>
    </el-form>
    <div>
      <el-button type="danger" style="margin-bottom: 20px" @click="removeIDS"
        >批量删除</el-button
      >
    </div>
    <el-table :data="list" border stripe @selection-change="selectionChange">
      <el-table-column type="selection"></el-table-column>
      <el-table-column label="#" width="50">
        <template slot-scope="scope">
          {{ (page - 1) * limit + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="name" label="名字"></el-table-column>
      <el-table-column prop="level" label="头衔">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.level == 1" type="success">高级讲师</el-tag>
          <el-tag v-if="scope.row.level == 2">首席讲师</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="intro" label="资历"></el-table-column>
      <el-table-column prop="sort" label="排序"></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <router-link :to="'/teacher/edit/' + scope.row.id">
            <el-button type="success" icon="el-icon-edit">编辑</el-button>
          </router-link>
          <el-button type="danger" icon="el-icon-delete" @click="removeDataById(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination
        @current-change="handlerCurrentChange"
        @size-change="changePageSize"
        :current-page="page"
        :page-size="limit"
        :page-sizes="[5, 10, 20]"
        layout="sizes,prev, pager, next,jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import teacherApi from "@/api/teacher";
export default {
  data() {
    return {
      list: [],
      total: 10, //总数
      page: 1,
      limit: 5,
      searchObj: {
        name: "",
        level: "",
      },
      removeIds: [], //批量删除id
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      teacherApi
        .listPage(this.page, this.limit, this.searchObj)
        .then((response) => {
          this.list = response.data.rows;
          this.total = response.data.total;
        });
    }, //选中表单框
     querySearchAsync(queryString, callback){
       teacherApi.getNamesByKey(queryString).then(res=>{
        callback(res.data.item)
       })
      
    },
    selectionChange(selection) {
      this.removeIds = selection;
    },
    handlerCurrentChange(page) {
      this.page = page;
      this.fetchData();
    },
    removeIDS() {
      this.$confirm("该操作为删除，删除后不可恢复!", "删除提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let ids=[];
          this.removeIds.forEach(item=>{
            ids.push(item.id)
          });
          teacherApi.removeByIds(ids).then((response) => {
            this.fetchData();
            if ((response.code = 10000)) {
              this.$message.success(response.message);
            } else {
              this.$message.success(response.message);
            }
          });
        })
        .catch((err) => {
          if (err == "cancel") {
            this.$message.error("取消删除");
          }
        });
    },
    changePageSize(size) {
      this.limit = size;
      this.fetchData();
    },
    resetData() {
      (this.searchObj = {}), this.fetchData();
    },
    removeDataById(id) {
      this.$confirm("该操作为删除，删除后不可恢复!", "删除提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          teacherApi.removeById(id).then((response) => {
            this.fetchData();
            if ((response.code = 10000)) {
              this.$message.success(response.message);
            } else {
              this.$message.success(response.message);
            }
          });
        })
        .catch((err) => {
          if (err == "cancel") {
            this.$message.error("取消删除");
          }
        });
    },
  },
};
</script>
<style>
.page {
  text-align: center;
  margin-top: 30px;
}
</style>